<template>
  <div id="wounded">
    <div class="content">
      <div id="left" class="content_item">
        <div
          class="Consulting_room"
          v-for="(item, index) in woundedStore.woundedData.list"
          :key="index">
          <title-bg :title="item.RoomName"></title-bg>
          <div class="consulting_room_content flex">
            <div class="bed">
              <bed-all :bedNum="item.BedNo"></bed-all>
            </div>
            <div class="bed_info">
              <bed-info :num="item.Used"></bed-info>
              <bed-info :isUsed="false" :num="item.Unused"></bed-info>
            </div>
          </div>
        </div>
      </div>
      <div id="right" class="content_item">
        <div class="wounded_sort">
          <title-bg title="伤员分类"></title-bg>
          <div class="wounded_sort_content">
            <div class="item top_left">
              <div class="item_title">轻伤统计</div>
              <div class="num">
                {{ woundedStore.woundedCategoryData.Slight.TagNo }}
                <span>人</span>
              </div>
            </div>
            <div class="item top_right">
              <div class="item_title">重伤统计</div>
              <div class="num">
                {{ woundedStore.woundedCategoryData.Serious.TagNo }}
                <span>人</span>
              </div>
            </div>
            <div class="item bottom_left">
              <div class="item_title">手术统计</div>
              <div class="num">
                {{ woundedStore.woundedCategoryData.operation.TagNo }}
                <span>人</span>
              </div>
            </div>
            <div class="item bottom_right">
              <div class="item_title">隔离数量</div>
              <div class="num">
                {{ woundedStore.woundedCategoryData.isolate.TagNo }}
                <span>人</span>
              </div>
            </div>
          </div>
        </div>
        <div class="wounded_num">
          <title-bg title="伤员数量"></title-bg>
          <div class="wounded_num_All flex">
            <div class="imgbox">
              <img class="content_img" src="@/assets/img/wounded.png" />
              <img
                class="base_img"
                src="@/assets/img/wounded-total-icon-bg.png" />
            </div>
            <div class="num flex">
              <div class="num_title">伤员总数</div>
              <div class="num_num">
                {{ woundedStore.totalWounded }} <span>人</span>
              </div>
            </div>
          </div>
          <div id="chart" ref="chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, nextTick, ref } from "vue";
import { useWoundedStore } from "@/stores/modules/wounded";
const woundedStore = useWoundedStore();
const chart: any = ref(null);
const drawChart = () => {
  nextTick(() => {
    chart.value.setOption(woundedStore.echartsOptions, true);
  });
};
onMounted(async () => {
  await woundedStore.getWoundedData();
  chart.value = echarts.init(document.getElementById("chart"));
  setInterval(() => {
    woundedStore.getWoundedData();
    drawChart();
  }, 60000);
  drawChart();
});
</script>

<style lang="scss" scoped>
#wounded {
  height: 100%;
  width: 100%;
  background: url("/wounded.png") no-repeat center center;
  background-size: 100% 100%;
  padding: 5.5% 0 0 0;
  .content {
    width: 90%;
    height: 95%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    .content_item {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      height: 100%;
      .Consulting_room {
        width: 48%;
        height: 33.33%;
        .consulting_room_content {
          height: calc(100% - 11rem);
          padding: 20px 0;
          justify-content: space-around;
          .bed {
            width: 50%;
          }
          .bed_info {
            width: 50%;
          }
        }
      }
    }
    #left {
      width: 60%;
    }
    #right {
      width: 40%;
      .wounded_sort {
        height: 33.33%;
        .wounded_sort_content {
          position: relative;
          width: 95%;
          margin: 2rem auto;
          height: calc(100% - 13rem);
          background: url("../assets/img/wounded-category.png");
          background-size: 100% 100%;
          .item {
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            height: 35%;
            .item_title {
              font-size: 3.6rem;
              color: #dfffff;
            }
            .num {
              font-size: 6rem;
              color: #ffcb6d;
              span {
                font-size: 3.6rem;
              }
            }
            &.top_left {
              top: 3.5rem;
              left: 5rem;
            }
            &.top_right {
              top: 3.5rem;
              right: 6rem;
            }
            &.bottom_left {
              bottom: 1.5rem;
              left: 6rem;
            }
            &.bottom_right {
              bottom: 2rem;
              right: 6rem;
            }
          }
        }
      }
      .wounded_num {
        height: 66.66%;
        .wounded_num_All {
          margin-top: 2rem;
          position: relative;
          height: 20rem;
          padding: 0 4rem;
          background: url("../assets/img/wounded-total-bg.png");
          background-size: 100% 100%;
          .imgbox {
            position: relative;
            .content_img {
              position: absolute;
              height: 10rem;
              width: 9rem;
              left: 50%;
              transform: translateX(-50%);
            }
            .base_img {
              width: 21rem;
              height: 17rem;
            }
          }
          .num {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .num_title {
              font-size: 6.4rem;
              margin-right: 10rem;
            }
            .num_num {
              font-family: D-DIN-Bold;
              font-size: 7.2rem;
              color: #ffcb6d;
              span {
                font-size: 3.6rem;
                color: #dfffff;
              }
            }
          }
        }
      }
      #chart {
        width: 100%;
        height: calc(100% - 11rem - 20rem);
      }
    }
  }
}
</style>
